import { useState,useRef, useEffect } from "react"

function MyComponenet() {

    const inputRef1 = useRef(null)

    const inputRef2 = useRef(null)

    const inputRef3 = useRef(null)

    useEffect(()=>{
        console.log("COMPONENT RENDERED")
    })

    const handleClick1 = ()=>{
        inputRef1.current.focus()
        inputRef1.current.style.backgroundColor = "green"
        inputRef2.current.style.backgroundColor = ""
        inputRef3.current.style.backgroundColor = ""

    }

    const handleClick2 = ()=>{
        inputRef2.current.focus()
        inputRef1.current.style.backgroundColor = ""
        inputRef2.current.style.backgroundColor = "red"
        inputRef3.current.style.backgroundColor = ""

    }

    const handleClick3 = ()=>{
        inputRef3.current.focus()
        inputRef1.current.style.backgroundColor = ""
        inputRef2.current.style.backgroundColor = ""
        inputRef3.current.style.backgroundColor = "blue"
    }

    return (
        <>
            <button onClick={handleClick1}>
                Click me
            </button>
            <input ref={inputRef1}/>

            <button onClick={handleClick2}>
                Click me
            </button>
            <input ref={inputRef2}/>

            <button onClick={handleClick3}>
                Click me
            </button>
            <input ref={inputRef3}/>
        </>
    )
}

export default MyComponenet